<template>
  <page-frame>
    <div class="member-retired">
      <div class="toptitle">
        <div class="left padding-bottom-6">居家养老</div>
        <div class="right">
          <div class="btns">
            <!--<el-button @click="retreat" class="lightGreenBtn">申请退住</el-button>-->
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="file-main">
        <div class="input">
          <el-row>
            <el-col style="width: 130px;">
              <div class="input-item">
                <el-select style="width:90%!important;" @change="clearItem" v-model="currentFileId" clearable placeholder="请选择项目">
                  <el-option
                    v-for="item in fileList"
                    :label="item.fileName"
                    :value="item.fileId">
                  </el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="input-item" v-show="currentFileId=='1'">
                <el-input v-model="queryData.memberName" @keyup.enter.native="query" placeholder="请输入会员姓名">
                </el-input>
              </div>
              <div class="input-item" v-show="currentFileId=='2'">
                <el-input v-model="queryData.memberNo" @keyup.enter.native="query" placeholder="请输入会员编号">
                </el-input>
              </div>
              <div class="input-item" v-show="currentFileId=='3'">
                <el-select v-model="queryData.careLevel" @change="query" placeholder="请选择护理等级">
                  <el-option
                    v-for="item in nursingGradeOptions"
                    :label="item.lname"
                    :value="item.lid">
                  </el-option>
                </el-select>
              </div>
              <div class="input-item" v-show="currentFileId=='4'">
                <el-input v-model="queryData.phone" @keyup.enter.native="query" placeholder="请输入手机号码">
                </el-input>
              </div>
              <div class="input-item" v-show="currentFileId=='5'">
                <el-input v-model="queryData.bedManager" @keyup.enter.native="query" placeholder="请输入床位服务人">
                </el-input>
              </div>
            </el-col>
            <el-col :span="2">
                <el-button class="query lightGreenBtn" @click="query">搜索</el-button>
            </el-col>
          </el-row>
        </div>

        <div class="tabs">
          <el-table
            :data="tableData"
            border
            highlight-current-row
            @cell-dblclick="getScheduleData"
            style="width: 100%">
            <el-table-column
              prop="memberName"
              label="会员姓名"
            >
            </el-table-column>
            <el-table-column
              prop="memberNo"
              label="会员编号"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="inventedBed"
              label="床位"
              width="120"
            >
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系方式"
            >
            </el-table-column>
            <el-table-column
            prop="address"
            label="居住地址"
            >
            </el-table-column>
            <el-table-column
              prop="lName"
              label="护理等级"
            >
            </el-table-column>
            <!--<el-table-column-->
              <!--prop="bedManagerInfo"-->
              <!--label="床位负责人"-->
            <!--&gt;-->
            <!--</el-table-column>-->
            <el-table-column
              prop="serverStateName"
              label="状态"
              width="94"
            >
            </el-table-column>
            <el-table-column
              prop="operating"
              label="操作"
              width="180"
            >
              <template scope="scope">
                <el-button type="text" size="small" v-if="scope.row.serverState != 2 && scope.row.serverState != 3" @click.stop="editService(scope.row)">选择套餐</el-button>
                <el-button type="text" size="small" v-if="scope.row.serverState == 2" @click.stop="bedManager(scope.row)">制定计划</el-button>
                <el-button type="text" size="small" v-if="scope.row.serverState == 2"  @click.stop="stopService(scope.row)">停止服务</el-button>
                <el-button type="text" size="small" v-if="scope.row.serverState == 3"  @click.stop="openService(scope.row)">服务再开</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChangePage"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import homeApi from '../../service/member/homeApi';
  import commonApi from '../../service/member/commonApi';
  import common from '../../config/common';
  export default {
    data() {
      return {
        noteBox:false,
        comment:'',
        actId:null,
        leaveDate: "",
        isOperation: true,
        currentFileId: 1,
        currentMemberObj:{},
        stopRefusal: false,
        refuseReason: '',
        schedule:false,
        nursingGradeOptions:[],
        queryData: {
          address: "",
          bed: "",
          bedManager: "",
          careLevel: "",
          memberId: "",
          memberName: "",
          memberNo: "",
          orgId: 0,
          phone: "",
          serverStatus: "",
          tenantId: 0
        },
        fileList: [{
          fileId: 1,
          fileName: "会员姓名"
        }, {
          fileId: 2,
          fileName: "会员编号",
        }, {
          fileId: 3,
          fileName: "护理等级",
        }, {
          fileId: 4,
          fileName: "手机号码",
        }, {
          fileId: 5,
          fileName: "床位负责人",
        }],
        tableData: [],
        total: 0,
        currentPage: 1,
      }
    },
    methods: {
      init(){
        this.loadTableData();
        this.getCareLevel();
      },
      /**
       * 搜索
       */
      query(){
        this.loadTableData();
      },
      /**
       * 清空搜索条件
       */
      clearItem(){
        this.queryData = {
          address: "",
            bed: "",
            bedManager: "",
            careLevel: "",
            memberId: "",
            memberName: "",
            memberNo: "",
            orgId: 0,
            phone: "",
            serverStatus: "",
            tenantId: 0
        }
      },
      /**
       * 分页查询/加载表格数据
       */
      loadTableData(){
        let self = this;
        homeApi.getMemberInfoCareList(10, self.currentPage, self.queryData).then(function (response) {
          self.tableData = response.body.data.list;
          self.total = response.body.data.total;
//          if (!response.data.data.total) {
//            self.total = 1;
//          } else {
//            self.total = response.body.data.total;
//          };
          self.reduction();
        }, function () {
        })
      },
      /**
       * 还原表格字段
       */
      reduction(){
        let self = this;
        for (let i = 0; i < self.tableData.length; i++) {
          let data = self.tableData[i];
          data.serverStateName ="";
          if (data.serverState == "" || data.serverState == 0) {
            data.serverStateName = "待服务";
          }else if(data.serverState == "2"){
            data.serverStateName = "服务中";
          }else if(data.serverState == "3"){
            data.serverStateName = "服务中止";
          }
        }
      },
      /**
       * 获得照护等级
       */
      getScheduleData(){

      },
      /**
       * 获得照护等级
       */
      getCareLevel(){
        let self = this;
        homeApi.getCareLevel().then(
          (response)=>{
            self.nursingGradeOptions = response.data.data;
          }
        );
      },
      /**
       * 分配负责人
       */
      bedManager(memberObj){
        this.$router.push({name: "homePersonCharge", params: {memberObj: memberObj}});
      },
      /**
       * 制定服务计划
       */
      editService(memberObj){
        this.$router.push({name:"externalMemPlan",params:{memberObj:memberObj}});
      },
      /**
       * 停止服务
       */
      stopService(memberObj){
        homeApi.updateServicePlanStatus(memberObj.memberId,3).then(
          (response)=>{
            this.loadTableData();
          }
        );
      },
      /**
       * 开始服务
       */
      openService(memberObj){
        homeApi.updateServicePlanStatus(memberObj.memberId,2).then(
          (response)=>{
            this.loadTableData();
          }
        );
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChangePage(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.loadTableData();
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>
<style>

  .el-input {
    width: 80%;
  }

  .input input {
    display: inline-block;
  }

  .scroll {
    height: calc(100vh - 122px);
    padding: 0px 50px;
  }

  .el-pagination {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }

  .el-select {
    display: block;
    position: relative;
  }
</style>


